const { ccclass, property, executeInEditMode, menu } = cc._decorator;

@ccclass
// @executeInEditMode
@menu('cccframework/MaskPlus')
export default class MaskPlus extends cc.Mask {

    ctx!: cc.Graphics;
    // 移动所有的_points坐标
    @property
    _offset: cc.Vec2 = cc.v2(0, 0);
    @property({
        type: cc.Vec2,
        tooltip: '偏移值',
    })
    get offset(): cc.Vec2 {
        return this._offset;
    }
    set offset(offset: cc.Vec2) {
        this._offset = offset;
        if (CC_EDITOR && this._points.length > 0) {
            let newArr = [];
            for (let i of this._points) {
                newArr.push(cc.v2(i.x + offset.x, i.y + offset.y));
                // Editor.log('i', i)
            }
            this._points = newArr;
            this.updateGraphVert();
            this._offset = cc.v2(0, 0);
        }
    }
    @property
    _points: cc.Vec2[] = [cc.v2(-50, -50), cc.v2(50, -50), cc.v2(50, 50), cc.v2(-50, 50)];
    @property({
        type: [cc.Vec2],
        tooltip: 'Mask组件多边形顶点数组',
    })
    get points() {
        return this._points;
    }
    set points(arr) {
        if (!this.isUse_points_array) {
            CC_EDITOR && Editor.log('设置points');
            this._points = arr;
            this.updateGraphVert();
        }
    }

    _points_array: cc.Vec2[][] = [];
    get points_array(): cc.Vec2[][] {
        return this._points_array;
    }
    set points_array(arr: cc.Vec2[][]) {
        // console.log('设置points_array');
        this.points = [];
        this._points_array = arr;
        this.updateGraphVertArray()
    }
    @property
    isUse_points_array: boolean = false;

    start() {
        super.start && super.start();
        this.ctx = this['_graphics'];
        // if (this.initPolygonMask) {
        this.updateGraphVert();
        // }
        if (this.node && this.node.isValid) {
            this.node.on(cc.Node.EventType.POSITION_CHANGED, this.updateGraphVert, this);
            this.node.on(cc.Node.EventType.SIZE_CHANGED, this.updateGraphVert, this);
            this.node.on(cc.Node.EventType.ANCHOR_CHANGED, this.updateGraphVert, this);
            this.node.on(cc.Node.EventType.SCALE_CHANGED, this.updateGraphVert, this);
        }
    }

    onEnable(){
        super.onEnable && super.onEnable();
        this.updateGraphVert();
    }
    /**更新多边形 */
    updateGraphVert() {
        // CC_EDITOR && Editor.log('updateGraphVert', this['_graphics'])
        let ctx = this.ctx;
        if (!ctx) return;
        console.log('updateGraphVert')
        // 更新顶点需要把所有的顶点依次连线，最后填充  
        ctx.clear();
        let points = this.points;
        if (points && points.length >= 3) {
            // CC_EDITOR && Editor.log('updateGraphVert', points.length);
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 0; i < points.length; i++) {
                let p = points[i];
                ctx.lineTo(p.x, p.y);
            }
            ctx.stroke();
            ctx.fill();
        }
    }
    /**多个多边形 */
    updateGraphVertArray() {
        if (!this.isUse_points_array) {
            console.error('不使用多组顶点数组')
            return;
        }
        let ctx = this.ctx;
        // 更新顶点需要把所有的顶点依次连线，最后填充  
        // console.log(this)
        if (!ctx) return;
        ctx.clear();
        // ctx.fillColor = cc.color(255, 255, 0)
        if (this.points_array.length > 0) {
            // 至少要有一组数组
            for (let arr of this.points_array) {
                // 超过三个点的数组
                ctx.moveTo(arr[0].x, arr[0].y);
                // 然后遍历数组把点都连上填充，形成镂空效果
                // for (let p of arr) {
                //     ctx.lineTo(p.x, p.y);
                //     console.log(p.x, p.y)
                // }
                for (let i = 0; i < arr.length; i++) {
                    let p = arr[i];
                    ctx.lineTo(p.x, p.y);
                }
                // console.log('画')
                ctx.stroke();
                ctx.fill();
            }
        }
    }
}
